<template>
	<view class="order">
		<view style="width: 750rpx;height: 20rpx;"></view>
		<!-- <view class="order-mation_address">
			<view class="address" @click="diycity">
				<view class="address_left">
					<image class="dingwei" src="https://pd.pdaxiang.com/upload/static/newImg/address.png"></image>
					<view class="address_text">
						<text v-if="cityList == '' || cityList==null">您还没有收货地址，去添加收货地址~</text>
						<text style="color: #999999;font-size: 30rpx;" v-if="cityList">{{ cityList.name }} &nbsp;&nbsp;&nbsp;{{ cityList.mobile }}</text>
						<text style="color: #333333;font-size: 28rpx;" v-if="cityList">
							{{ cityList.province }}{{ cityList.city }}{{ cityList.district }}{{ cityList.detail }}
						</text>
					</view>
				</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view> -->
		<view class="order-store"  v-if="minlist.goods_list">
			<view class="order-store-cent">
				<view class="order-list">
					<view class="order-list-left">
						<image :src="minlist.goods_list.cover_pic" mode="aspectFill"></image>
						<view>
							<view class="ordertext1">{{minlist.goods_list.goods_name}}</view>
							<view class="ordertext2">
								<view class="left">￥{{ minlist.goods_list.single_price }}</view>
								<view class="right">
									<text></text>
									<text>x{{minlist.goods_list.num}}</text>
									<!-- <u-number-box v-model="value" @change="valChange" :min="1" :long-press="false" :disabled-input="true"></u-number-box> -->
								</view>
							</view>
							<view class="order_gige">
								规格：<text  v-for="(item,index) in minlist.goods_list.attr_list" :key="index">{{item.attr_name}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="order-mationyun" style="margin-bottom: 20rpx;" v-if="minlist.goods_list.freight>0">
			<text>运费</text>
			<text>￥{{ minlist.freight }}</text>
		</view>
		<view class="order-mationyun">
			<text>总计</text>
			<text>￥{{ minlist.total_price }}</text>
		</view>
		<view class="order-mationyun"  @click="goseleCoupon">
			<text>优惠券</text>
			<text v-if="youhuinum==0" style="font-size: 28rpx;">选择优惠券<u-icon name="arrow-right"></u-icon></text>
			<text v-if="youhuinum!=0">-{{youhuinum}}<u-icon name="arrow-right"></u-icon></text>
		</view>
		<view class="order-mation3" >
			<view class="om-top"><text>支付方式</text></view>
			<view class="order-con">
				<view v-if="walletData.weixin_pay_status=='on'">
					<view @click="zfClick(1)" >
						<image :src="baseUrl + '/static/user/lchecks.png'" v-if="ptype == 1"></image>
						<image :src="baseUrl + '/static/index/pzselect1.png'" v-else></image>
						<text>微信支付</text>s
					</view>
				</view>
				<!-- #ifndef MP-WEIXIN -->
					<view  v-if="walletData.alipay_status=='on'">
						<view@click="zfClick(2)">
							<image :src="baseUrl + '/static/user/lchecks.png'" v-if="ptype == 2"></image>
							<image :src="baseUrl + '/static/index/pzselect2.png'" v-else></image>
							<text>支付宝支付</text>
						</view>
					</view>
					<view  v-if="walletData.jd_pay_status=='on'">
						<view@click="zfClick(4)">
							<image :src="baseUrl + '/static/user/lchecks.png'" v-if="ptype == 4"></image>
							<image :src="baseUrl + '/static/index/pzselect1.png'" v-else></image>
							<text>京东支付</text>
						</view>
					</view>
				<!-- #endif -->
			</view>
		</view>
		<view class="tab_xieyi">
			<image :src="baseUrl + '/static/user/lcheck.png'" v-if="checkStatus==false" @click="goCheck"></image>
			<image :src="baseUrl + '/static/user/lchecks.png'" v-else @click="goCheck"></image>
			<view class="" @click="goCheck" >
				已阅读并同意<text style="color: #6792DD;"  @click.stop="goUrl('/userPage/user/agreement?id=2')">《用户协议》</text>
			</view>
		</view>
		<view class="shuoming" >
			<view class="" v-html="wencontent">
			</view>
		</view>
		<view style="height: 100rpx;"></view>
		<view class="btns">
				<view>
					<text class="zongjia">合计: ￥{{heji_price}}</text>
				</view>
				<view class="odpon allbtn" @click="uploadorder"><text>立即结算</text></view>
		</view>
		<sele-coupon ref="couponref" :couponList="couponList" @goheji="goheji" :youhuiNum="youhuinum"></sele-coupon>
		<u-popup mode="center" v-model="urlpayStatus">
			<view class="webcenter">
				<!-- <web-view  :src="payurl" style="width: 400rpx;height: 400rpx;"></web-view> -->
				结算
			</view>
		</u-popup>
	</view>
</template>

<script>
import seleCoupon from "@/components/mall/selecoupon.vue"
export default {
	components:{
		seleCoupon
	},
	data() {
		return {
			payurl:"",
			order_id:"",
			getjieguodingshi:null,
			urlpayStatus:false,
			value:1,
			minlist: {
				goods_list:{},
				pay_price:0
			},
			cityList: {},
			remark: '',
			goods_id:'',
			name:"",
			mobile:"",
			page:1,
			baseUrl : this.$configs.urls,
			ptype:1,//1微信2支付宝3碎片4京东
			goodsData:{
				result:{
					combination:0	
				}
			},
			couponList:[],
			youhuinum:0,
			walletData:{},//余额
			pay_price:0,
			total_price:0,
			heji_price:0,
			checkStatus:false,//协议
			wencontent:""
		};
	},
	onShow() {
		uni.$on('changedz', res => {
			this.cityList = res.local;
			this.cityList.address_id = res.local.id
		});
		this.arrData();
		this.getwallet()//钱包
		this.wenzhanglist()
	},
	onLoad(option) {
		this.goods_id = option.goods_id
		this.goodsData = JSON.parse(option.goodsData)
		
	},
	methods: {
		goUrl(url){
			uni.navigateTo({
				url:url
			})
		},
		goCheck(){
			this.checkStatus = !this.checkStatus
		},
		wenzhanglist(){
			let data = {
				id:13
			}
			this.$Request.get(this.$api.index.wenzhang,data).then(res => {
				this.wencontent = res.data.content
			});
		},
		getjieguo(){
			let data = {
				order_id:this.order_id
			}
			this.$Request.get(this.$api.index.payResult,data).then(res => {
				if(res.data.is_pay==1){
					clearInterval(this.getjieguodingshi)
					this.urlpayStatus = false;
					setTimeout(()=>{
						uni.navigateTo({
							url: '/userPage/user/order/order'
						})
					},800)
					 clearTimeout();
				}
			});
		},
		getwallet(){
			this.$Request.get(this.$api.user.wallet).then(res => {
				this.walletData = res.data
				if(res.data.weixin_pay_status=='on'){
					this.ptype = 1
					return;
				}
				if(res.data.alipay_status=='on'){
					this.ptype = 2
					return;
				}
				if(res.data.yuanshi_pay_status=='on'){
					this.ptype = 3
					return;
				}
				if(res.data.jd_pay_status=='on'){
					this.ptype = 4
					return;
				}
			});
		},
		goheji(e){
			this.coupon_id = e.coupon_id
			this.youhuinum = e.youhuinum
			this.heji_price = Number(this.pay_price) - Number(e.youhuinum)
			if(this.heji_price<0){
				this.heji_price = 0
			}
		},
		goseleCoupon(){
			this.$refs.couponref.open()
			let data = {
				goods_id: this.goods_id,
				combination:this.goodsData.result.combination,
				num:this.goodsData.result.count,
				page:this.page
			};
			this.$Request.get(this.$api.user.goodsCouponList, data).then(res => {
				this.couponList = res.data;
			});
		},
		valChange(e) {
			this.minlist.pay_price = Number(this.minlist.goods.price) * Number(e.value)
		},
		zfClick(infock){
			this.ptype = infock
		},
		//点确定
		submits(){
			this.show = false;
		},
		arrData() {
			let data = {
				goods_id: this.goods_id,
				combination:this.goodsData.result.combination,
				num:this.goodsData.result.count
			};
			this.$Request.post(this.$api.mall.submitPreview, data).then(res => {
				this.minlist = res.data;
				this.heji_price = res.data.pay_price
				this.pay_price = res.data.pay_price
				this.total_price = res.data.total_price
				this.cityList = res.data.address;
			});
		},
		//提交订单
		uploadorder() {
			if(this.checkStatus==false){
				uni.showToast({
					title:"请先勾选阅读并同意用户协议",
					icon:"none"
				})
				return
			}
			// if(this.cityList==null){
			// 	uni.showToast({
			// 		title:"请选择收获地址",
			// 		icon:"none"
			// 	})
			// 	return
			// }
			let data = {
				// address_id: this.cityList.address_id,
				goods_id: this.goods_id,
				combination:this.goodsData.result.combination,
				num:this.goodsData.result.count,
				user_coupon_id:this.coupon_id,
				pay_type:this.ptype,
				type:0
				
			};
			this.$Request.post(this.$api.mall.submit, data).then(res => {
				this.subpayData(res.data.order_id)
			});
		},
		subpayData(order_id){
			let data = {
				order_id: order_id,
				pay_type:this.ptype
			};
			this.$Request.get(this.$api.mall.payData, data).then(res => {
				////console.log(res)
				if(res.data.status==0){
					this.payurl = res.data.pay_data
					this.order_id = res.data.order_id
					if(this.ptype==4){
						this.urlpayStatus = true;
						this.getjieguodingshi = setInterval(()=>{
							this.getjieguo()
						},3000)
						return
					}
					this.Payment(res.data.pay_data)
				}else if(res.data.status==1){
					//已支付
					uni.showToast({
						title:res.msg,
						icon:"none"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '/userPage/user/order/order'
						})
					},800)
					 clearTimeout();
				}
			});
		},
		Payment(pay_data){
			let provider = ''
			if(this.ptype==1){
				provider = 'wxpay'
			}else{
				provider = 'alipay'
			}
			//调用支付
			uni.requestPayment({
				provider: provider,
				orderInfo: pay_data,
				success() {
					uni.showToast({
						title:"支付成功",
						icon:"none"
					})
					setTimeout(()=>{
						uni.navigateTo({
							url: '/userPage/user/order/order'
						})
					},800)
					 clearTimeout();
				},
				fail(res) {
					////console.log(res);
				}
			});
		},
		//选择收货地址
		diycity() {
			uni.navigateTo({
				url: '/userPage/user/address/address?type=1'
			});
		},
		back() {
			uni.navigateBack({
				delta: 1
			});
		},
		shouhuo() {
			uni.navigateTo({
				url: '/pages/live/liveshop/tuikuan'
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	
	.tuikuan{
		width: 750rpx;
		display: flex;
		flex-direction: column;
		padding: 20rpx;
		background: #FFFFFF;
	}
	.order-mation3 {
		margin: 0 auto;
		margin-top: 20rpx;
		padding-top: 20rpx;
		padding: 20rpx;
		width: 750rpx;
		background: #ffffff;
		// border-radius: 20rpx;
		.om-top {
			display: flex;
			justify-content: space-between;
			text:nth-of-type(1) {
				font-size: 34rpx;
				color: #333333;
				font-weight: 600;
			}
			text:nth-of-type(2) {
				font-size: 30rpx;
				color: #333333;
			}
		}
		.order-con {
			display: flex;
			flex-direction: column;
			justify-content: center;
			view {
				display: flex;
				justify-content: space-between;
				align-items: center;
				view {
					margin-top: 28rpx;
					text {
						margin-left: 18rpx;
					}
				}
			}
			image {
				width: 36rpx;
				height: 36rpx;
			}
		}
	}
	.check{
		width: 40rpx;
		height: 40rpx;
	}
	.mode {
		padding: 0 20rpx;
		width: 100%;
		box-shadow: 0 3rpx 6rpx rgba(13, 107, 107, 0.16);
		margin: 0 auto;
		margin-top: 20rpx;
		background: #FFFFFF;
	
		.txt {
			padding-left: 20rpx;
			font-size: 30rpx;
			color: #000000;
			line-height: 102rpx;
		}
	
		.wx {
			display: flex;
			.img {
				width: 48rpx;
				height: 48rpx;
				margin-top: 30rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
	
			.txt {
				flex: 1;
				font-size: 26rpx;
	
			}
	
			.xuanzhong {
				width: 44rpx;
				height: 44rpx;
				margin-top: 30rpx;
	
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}

.zongjia {
	font-size: 32rpx;
	color: #333333;
	margin-left: 20rpx;
}
.odpon {
	width: 370rpx;
	height: 88rpx;
	color: #000;
	border-radius: 20rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	margin-right: 20rpx;
}
.tab_xieyi{
	display: flex;
	align-items: center;
	padding: 20rpx 20rpx 0rpx 20rpx;
	image{
		width: 40rpx;
		height: 40rpx;
	}
	view{
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		padding-left: 20rpx;
	}
}
.shuoming{
	padding: 20rpx;
	box-sizing: border-box;
}
.btns {
	position: fixed;
	left: 0;
	bottom: 0;
	background-color: #fff;
	width: 750rpx;
	height: 120rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-top: 1px solid #F5F5F5;
}
.order {
	min-height: 100vh;
	background-color: #f8f8f8;
	padding-bottom: 100rpx;
	.order-status {
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
		margin: 0 auto;
		margin-top: -65rpx;

		&-top {
			display: flex;
			justify-content: center;
			font-size: 36rpx;
			color: #333;
			padding-top: 23rpx;
		}

		&-cent {
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #999;
			margin-top: 4rpx;
		}

		&-bot {
			margin-top: 18rpx;
			display: flex;
			justify-content: center;
			font-size: 28rpx;
			color: #333;

			text {
				border: 1px solid #707070;
				display: block;
				padding: 2rpx 20rpx;
				border-radius: 100rpx;
				margin: 0 10rpx 30rpx;
			}
		}
	}

	.order-info {
		margin: 0 auto;
		margin-top: 14rpx;
		width: 710rpx;
		background: #ffffff;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;

		view {
			text {
				display: block;

				&:nth-child(1) {
					font-size: 30rpx;
					color: #333333;
				}

				&:nth-child(2) {
					margin-top: 12rpx;
					font-size: 26rpx;
					color: #999;
				}
			}
		}

		image {
			width: 12rpx;
			height: 23rpx;
		}
	}

	.order-store {
		margin: 0 auto;
		// margin-top: 20rpx;
		width: 100%;
		background: #ffffff;

		&-top {
			padding: 20rpx 20rpx 0;
			display: flex;
			align-items: center;

			text {
				font-size: 32rpx;
				color: #333;
				display: block;
			}

			image {
				margin-left: 20rpx;
				width: 12rpx;
				height: 23rpx;
				display: block;
			}
		}

		&-cent {
			padding: 20rpx 20rpx 0;
			// border-top: 1px solid #e3e3e3;
			margin-top: 12rpx;

			.order-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 32rpx;
				color: #333333;
				&-left {
					display: flex;
					align-items: center;

					image {
						width: 202rpx;
						height: 202rpx;
						border-radius: 10rpx;
						margin-right: 10rpx;
					}

					view {
						width: 450rpx;
						.order_gige{
							display: flex;
							align-items: center;
							margin-top: 10rpx;
							text{
								color: #333333;
								font-size: 28rpx;
							}
						}
						.ordertext1 {
							color: #333333;
							font-size: 28rpx;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 1;
							-webkit-box-orient: vertical;
						}
						.guigecss {
							display: flex;
							text-overflow: -o-ellipsis-lastline;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 2;
							-webkit-box-orient: vertical;
							text {
								color: #333333;
								font-size: 28rpx;
							}
						}
						.ordertext2 {
							width: 100%;
							display: flex;
							justify-content: space-between;
							margin-top: 20rpx;
							.left{
								color: #fb4f40;
								font-size: 32rpx;
							}
							.right{
								width: 40%;
							}
						}
						.ordertext3{
							font-size: 28rpx;
							font-family: PingFang SC;
							font-weight: 400;
							color: #999999;
							text-decoration:line-through;
						}
					}
				}

				&-right {
					font-size: 28rpx;
					color: #333;
				}
			}

			.order-num {
				margin: 0 auto;
				width: 618rpx;
				height: 56rpx;
				background: #f8f8f8;
				border-radius: 100rpx;
				font-size: 30rpx;
				color: #999;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 25rpx;
					height: 16rpx;
					margin-left: 20rpx;
				}
			}

			.order-cost {
				display: flex;
				justify-content: space-between;
				font-size: 30rpx;
				color: #333;
				padding: 10rpx 0;
			}
		}

		.order-money {
			padding: 20rpx;
			border-top: 1px solid #e3e3e3;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			font-size: 28rpx;
			color: #999;

			view {
				&:nth-child(2) {
					font-size: 30rpx;
					color: #333;
					margin-left: 20rpx;
				}
			}
		}
	}
	.order-mationyun {
		margin: 0 auto;
		padding: 20rpx;
		width: 100%;
		background: #ffffff;
		display: flex;
		justify-content: space-between;

		> text {
			font-size: 32rpx;
			color: #333333;
			font-weight: 600;
			padding-right: 40rpx;
		}
	}
	.order-mation_remack{
		margin: 0 auto;
		padding: 20rpx;
		width: 100vw;
		background: #ffffff;
		display: flex;
		align-items: center;
		> text {
			font-size: 30rpx;
			color: #333333;
		}
		> input {
			width: 611rpx;
			height: 92rpx;
			background: #F8F8F8;
			opacity: 1;
			border-radius: 10rpx;
			background: #F8F8F8;
			opacity: 1;
			padding-left: 20rpx;
			margin-left: 20rpx;
		}
		.address {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			align-items: center;
			view {
				text {
					display: block;
					margin-left: 20rpx;
				}
			}
			
		}
	}
	.order-mation_address {
		margin: 0 auto;
		padding-right: 20rpx;
		width: 100vw;
		background: #ffffff;
		display: flex;
		align-items: center;
		padding:20rpx;
		box-sizing: border-box;
		.dingwei{
			width: 45rpx;
			height: 55rpx;
		}
		> text {
			font-size: 30rpx;
			color: #333333;
		}
		
		
		> input {
			width: 611rpx;
			height: 92rpx;
			background: #F8F8F8;
			opacity: 1;
			border-radius: 10rpx;
			background: #F8F8F8;
			opacity: 1;
			padding-left: 20rpx;
			margin-left: 20rpx;
		}
		.address {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			justify-content: space-between;
			align-items: center;
			.address_left {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
				.address_text{
					text {
						display: block;
						margin-left: 20rpx;
					}
				}
			}
		}
	}
}
</style>
